﻿@{
    ViewBag.Title = "StudMap Client";
}
@section scripts{
    <script type="text/javascript"> </script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/d3.v3.min.js")"> </script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/d3.floorplan.min.js")"> </script>


    <style type="text/css">
	
	
        body {
            background: #fcfcfc;
            font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
            font-size: 14px;
            margin: 0;
        }

        a { color: #555; }

        a:hover { color: #000; }

        ul {
            margin: 0;
            padding: 0;
        }

        div.code {
            background: #eee;
            border: 1px solid #ccc;
        }

        .map-controls { display: none; }
    </style>


    <div id="map">
        <svg id="svgMap" height="100%" width="100%"></svg>
    </div>



    
    <script id="demo-code" type="text/javascript">

        var floorID = '@Request.Params["floorID"]';
        var first = true;
        var x1, x2, y1, y2;
        var KreisRadius = 2;
        var linienDicke = 2;
        var pointColor = "#83C32D";
        var pathColor = "#83C32D";

        var startPoint;
        var endPoint;
        var selectedPoint;

        var domainStartX = 0, domainEndX = 1;
        var rangeStartX = 0, rangeEndX;
        var domainStartY = 0, domainEndY = 1;
        var rangeStartY = 0, rangeEndY;


        var svgContainer = d3.select("#svgMap");
        d3.json("http://193.175.199.115/StudMapService/api/Maps/GetFloorPlanImage/?floorid=" + floorID, function(data) {

            var newImg = new Image();
            newImg.onload = function() {


                imageWidth = newImg.width;
                imageHeight = newImg.height;

                width = window.innerWidth;
                height = imageHeight / imageWidth * width;
                rangeEndX = width; //window.innerWidth;
                rangeEndY = height; //window.innerHeight;

                var xscale = d3.scale.linear()
                    .domain([domainStartX, domainEndX])
                    .range([rangeStartX, rangeEndX]),
                    yscale = d3.scale.linear()
                        .domain([domainStartY, domainEndY])
                        .range([rangeStartY, rangeEndY]),
                    map = d3.floorplan().xScale(xscale).yScale(yscale),
                    imagelayer = d3.floorplan.imagelayer(),
                    mapdata = {};


                mapdata[imagelayer.id()] = [{
                    url: data.Object,
                    x: 0,
                    y: 0,
                    height: domainEndX,
                    width: domainEndY
                }];
                map.addLayer(imagelayer);
                svgContainer.datum(mapdata).call(map);


                d3.select(".map-layers").append("g").attr("id", "circles");
                d3.select(".map-layers").append("g").attr("id", "path");

                d3.json("http://193.175.199.115/StudMapService/api/Maps/GetFloorPlanData/?floorid=" + floorID, function(data) {

                    for (var i = 0; i < data.Object.Graph.Nodes.length; i++) {
                        showCircles([{ x: data.Object.Graph.Nodes[i].X, y: data.Object.Graph.Nodes[i].Y, id: data.Object.Graph.Nodes[i].Id }]);
                    }

                    if (window.jsinterface) {
                        window.jsinterface.onFinish();
                    }
                });

            };
            // handle failure
            newImg.onerror = function() {

            };
            newImg.src = data.Object;


        });


        function setStartPoint(PID) {
            if (startPoint) {
                startPoint.setAttribute("fill", pointColor);
                startPoint.setAttribute("r", KreisRadius);
            }
            startPoint = document.getElementById(PID);

            startPoint.setAttribute("fill", "blue");
            startPoint.setAttribute("r", 4);

            testPath();
        }

        function setEndPoint(PID) {
            if (endPoint) {
                endPoint.setAttribute("fill", pointColor);
                endPoint.setAttribute("r", KreisRadius);
            }
            endPoint = document.getElementById(PID);

            endPoint.setAttribute("fill", "red");
            endPoint.setAttribute("r", 4);

            testPath();
        }

        function testPath() {
            if (startPoint && endPoint) {

                var div = document.getElementById('path');
                while (div.firstChild) {
                    div.removeChild(div.firstChild);
                }
                showPath(startPoint.id, endPoint.id);
            }
        }

        function showPath(startId, endId) {

            d3.json("http://193.175.199.115/StudMapService/api/Maps/GetRouteBetween/?mapId=3&endNodeId=" + startId + "&startNodeId=" + endId, function(data) {

                drawPath(data.List);
                document.getElementById('path').style.display = 'block';
                document.getElementById('circles').style.display = 'none';

            });
        }

        function highlightPoint(PID, color) {
            if (selectedPoint)
                selectedPoint.setAttribute("fill", pointColor);
            document.getElementById(PID).setAttribute("fill", color);
            selectedPoint = document.getElementById(PID);
        }

        function highlightPointR(PID, color, radius) {
            if (selectedPoint) {
                selectedPoint.setAttribute("fill", pointColor);
                selectedPoint.setAttribute("r", KreisRadius);
            }
            document.getElementById(PID).setAttribute("fill", color);
            document.getElementById(PID).setAttribute("r", radius);

            selectedPoint = document.getElementById(PID);
        }


        function clearPath() {

            var div = document.getElementById('path');
            while (div.firstChild) {
                div.removeChild(div.firstChild);
            }

        }


        function clearMap() {

            var div = document.getElementById('circles');
            while (div.firstChild) {
                div.removeChild(div.firstChild);
            }

        }

        function circle_click(evt) {
            var circle = evt.target;


            if (window.jsinterface) {
                window.jsinterface.punkt(circle.id);
            }

        }

        function drawPath(PathAsArray) {
            if (PathAsArray.length < 2)
                return;


            for (var i = 0; i < PathAsArray.length - 1; i++) {

                if (PathAsArray[i].FloorId == floorID) {
                    d3.select("#path").append("line")
                        .attr("x1", PathAsArray[i].X * rangeEndX)
                        .attr("y1", PathAsArray[i].Y * rangeEndY)
                        .attr("x2", PathAsArray[i + 1].X * rangeEndX)
                        .attr("y2", PathAsArray[i + 1].Y * rangeEndY)
                        .attr("stroke-width", linienDicke)
                        .attr("fill", pathColor)
                        .attr("stroke", pathColor);
                }

            }


            var i = 0;
            var pointInPath = d3.select("#path").append("circle");
            pointInPath.attr("cx", PathAsArray[i].X * rangeEndX)
                .attr("cy", PathAsArray[i].Y * rangeEndY)
                .attr("id", PathAsArray[i].Id)
                .attr("fill", pointColor)
                .attr("r", KreisRadius);
            if (i == 0) {
                pointInPath.attr("fill", "red").attr("r", 4);
            }


            d3.select("#path").append("circle")
                .attr("cx", PathAsArray[PathAsArray.length - 1].X * rangeEndX)
                .attr("cy", PathAsArray[PathAsArray.length - 1].Y * rangeEndY)
                .attr("id", PathAsArray[PathAsArray.length - 1].Id)
                .attr("fill", "blue").attr("r", 4);


        }

        function showCircles(CirclesAsArray) {

            //alert("in showCircle");
            for (var i = 0; i < CirclesAsArray.length; i++) {

                d3.select("#circles").append("circle")
                    .attr("cx", CirclesAsArray[i].x * rangeEndX)
                    .attr("cy", CirclesAsArray[i].y * rangeEndY)
                    .attr("id", CirclesAsArray[i].id)
                    .attr("r", KreisRadius)
                    .attr("fill", pointColor)
                    .attr("stroke", "red")
                    .attr("stroke-width", "10")
                    .attr("stroke-opacity", "0.0")
                    .attr("onclick", "circle_click(evt)");

            }
        }

        function zoomOut() {
            d3.select(".map-layers").attr("transform", "translate(0,0)scale(1)");
        }

        function zoomToPoint(PID) {


            var node = document.getElementById(PID);
            ;

            if (node.length < 1)
                return;

            var scale = 5;
            var cx = node.attr("cx") * 1;
            var cy = node.attr("cy") * 1;
            var translateX = cx * (1 - scale);
            var translateY = cy * (1 - scale);

            var transformStr = "translate(" + translateX + ", " + translateY + ")scale(" + scale + ")";
            d3.select('.map-layers').attr("transform", transformStr);

        }

        function resetMap() {
            var div = document.getElementById('circles');
            while (div.firstChild) {
                div.removeChild(div.firstChild);
            }

            d3.json("http://193.175.199.115/StudMapService/api/Maps/GetFloorPlanData/?floorid=" + floorID, function(data) {
                for (var i = 0; i < data.Object.Graph.Nodes.length; i++) {
                    showCircles([{ x: data.Object.Graph.Nodes[i].X, y: data.Object.Graph.Nodes[i].Y, id: data.Object.Graph.Nodes[i].Id }]);
                }
            });

            startPoint = null;
            endPoint = null;

            var div = document.getElementById('path');
            while (div.firstChild) {
                div.removeChild(div.firstChild);
            }

            document.getElementById('path').style.display = 'none';
            document.getElementById('circles').style.display = 'block';
        }

    </script>

}